<template>
  <view class="container">
    <view class="header">
      <view class="list">
        <view class="left">
          <view class="title">欢迎使用</view>
          <view class="small-title">防伪查询小程序</view>
        </view>

        <view class="right" @click="ToBusiness">
          <image src="/static/images/user-circle.png" />
          {{ title }}
        </view>
      </view>

      <view class="validate-input">
        <u-input v-model="code" :placeholder="placeholderText">
          <!-- 插槽 suffix输入框的后置内容 -->
          <!-- 只有h5不显示 -->
          <!-- #ifndef H5 -->
          <template slot="suffix">
            <u-icon size="28" name="scan" @click="onScanCode"></u-icon>
          </template>
          <!-- #endif -->
        </u-input>
      </view>
    </view>

    <view class="validate">
      <u-button
        :customStyle="validateBtn"
        :plain="true"
        text="开始验证"
        @click="onValidate"
      ></u-button>
    </view>

    <!-- 提醒组件 -->
    <u-toast ref="notice" />
  </view>
</template>

<script>
export default {
  onShow() {
    var business = uni.getStorageSync("business")
      ? uni.getStorageSync("business")
      : {};

    this.title =
      Object.getOwnPropertyNames(business).length > 0 ? "我的" : "登录";
  },
  data() {
    return {
      code: "",
      title: "登录",
      // #ifndef H5
      placeholderText: "请输入防伪码或者扫防伪码",
      // #endif
      // #ifdef H5
      placeholderText: "请输入防伪码",
      // #endif
      validateBtn: {
        width: "100%",
        height: "100%",
        background: "transparent",
        color: "#fff",
      },
    };
  },
  methods: {
    // 扫码
    onScanCode() {
      // 调用扫码接口
      uni.scanCode({
        success: (res) => {
          // 获取路径
          var path = res.path ? res.path : "";

          // 如果不为空就跳转
          if (path) uni.$u.route(path);
        },
      });
    },
    onValidate() {
      // 判断是否有输入防伪码
      if (!this.code) {
        this.$refs.notice.show({
          type: "error",
          message: "防伪码不能为空",
        });
        return false;
      }

      // 跳转
      this.$u.route({
        url: "pages/validate/info",
        params: { code: this.code },
      });
    },
    ToBusiness() {
      this.$u.route("pages/business/index");
    },
  },
};
</script>

<style>
.header {
  height: 90vw;
  background: linear-gradient(to right, #33ccff 0%, #91cbf8 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-top: 10vh;
}

.header .list {
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.header .list .left {
  margin-left: 20px;
}

.header .list .left .title {
  margin-bottom: 10px;
}

.header .list .right {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 5px 0 10px;
  color: #469eff;
  font-size: 12px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  height: 35px;
}

.header .list .right image {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.header .validate-input {
  width: 80%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20vw;
}

.validate {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: #2879fc;
  margin: 0 auto;
  margin-top: -50px;
  box-shadow: 0px 0px 10px 10px #eee;
}
</style>
